<template>
  <div class="tool-bar-ri">
    <div class="header-icon"></div>
    <img class="pointer" src="@/assets/images/settledIn.png" />
    <ul class="flx-align-center">
      <li>
        <el-icon><Search /></el-icon>
      </li>
      <li>
        <el-icon><Headset /></el-icon>
      </li>
      <li>
        <el-icon><Iphone /></el-icon>
      </li>
      <li>
        <el-icon><Bell /></el-icon>
      </li>
      <li>
        <div class="plus flx-align-center flx-center">
          <el-icon color="#fff" size="16"><CirclePlusFilled /></el-icon>
        </div>
      </li>
    </ul>
    <UserName />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useUserStore } from "@/stores/modules/user";
import UserName from "./components/UserName.vue";

const userStore = useUserStore();
</script>

<style scoped lang="scss">
.tool-bar-ri {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 25px;
  ul {
    margin-left: 32px;
    margin-right: 12px;
    li {
      width: 40px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;

      .plus {
        width: 24px;
        height: 24px;
        background: var(--el-color-primary);
        border-radius: 4px;
        font-weight: bold;
      }
    }
  }
  .header-icon {
    display: flex;
    align-items: center;
    & > * {
      margin-left: 21px;
      color: var(--el-header-text-color);
    }
  }
}
</style>
